<template>
   <div v-loading="loading">
      <el-row :gutter="20">
         <el-col :span="6">
            <div class="grid-content bg-purple1"></div>
         </el-col>
         <el-col :span="6">
            <div class="grid-content bg-purple2"></div>
         </el-col>
         <el-col :span="6">
            <div class="grid-content bg-purple3"></div>
         </el-col>
         <el-col :span="6">
            <div class="grid-content bg-purple4"></div>
         </el-col>
      </el-row>

      <el-row>
         <!--折线图-->
         <el-col :span="12">
            <div class="grid-content">
               <ve-line :data="chartData1"></ve-line>
            </div>
         </el-col>
         <!--柱状图-->
         <el-col :span="12">
            <div class="grid-content">
               <ve-pie :data="chartData2"></ve-pie>
            </div>
         </el-col>
      </el-row>


   </div>
</template>

<script>
   export default {
      name: "Home",
      data() {
         return {
            loading: false,
            chartData1: {
               columns: ['日期', '访问用户', '下单用户', '下单率'],
               rows: [
                  {'日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32},
                  {'日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26},
                  {'日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76},
                  {'日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49},
                  {'日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323},
                  {'日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78}
               ]
            },
            chartData2: {
               columns: ['性别', '人数'],
               rows: []
            }
         }
      },
      created() {
         this.loading = true;
         //性别统计
         axios.get(`/admin/sex_total`)
            .then((res) => {
               this.chartData2.rows = res.data;
               this.loading = false;
            })
      },
   }
</script>

<style scoped>
   .el-row {
      margin-bottom: 20px;
   }

   .el-row:last-child {
      margin-bottom: 0;
   }

   .el-col {
      border-radius: 4px;
   }

   .bg-purple-dark {
      background: #99a9bf;
   }

   .bg-purple1 {
      background: #409EFF;
   }

   .bg-purple2 {
      background: #67C23A;
   }

   .bg-purple3 {
      background: #E6A23C;
   }

   .bg-purple4 {
      background: #F56C6C;
   }

   .bg-purple-light {
      background: #e5e9f2;
   }

   .grid-content {
      border-radius: 4px;
      min-height: 50px;
   }

   .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
   }

</style>